<%@ page language="java" contentType="text/html; charset=ISO-8859-1"
	pageEncoding="ISO-8859-1"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<script src="http://code.jquery.com/jquery-latest.js"
	type="text/javascript"></script>

<script>
	$(document).ready(function() {		
		$("#btnSearch").click(function() {
			var restUrl = "";
			var tableId = "";
			switch($("#hdnTabSelected").val())
			{
			case "Hot":
			  restUrl = "http://localhost:8080/wspago/services/books/hot";
			  tableId = "#hotTable";
			  break;
			case "Isbn":
				  restUrl = "http://localhost:8080/wspago/services/books/" + $("#txtSearch").val();
				  tableId = "#isbnTable";
			  break;
			case "Author":
				  restUrl = "http://localhost:8080/wspago/services/books/author/" + $("#txtSearch").val();
				  tableId = "#authorTable";
			  break;
			case "Title":
				  restUrl = "http://localhost:8080/wspago/services/books/title/" + $("#txtSearch").val();
				  tableId = "#titleTable";
			  break;
			case "Category":
				  restUrl = "http://localhost:8080/wspago/services/books/category/" + $("#txtSearch").val();
				  tableId = "#categoryTable";
			  break;			 
			default:
			  alert("WDF?");
			}
			
				$.ajax({
					url: restUrl,
					type: "GET",
					success: function(data){
						var dataJson = $.parseJSON(data);
						
						if ($("#hdnTabSelected").val() == 'Isbn'){
							var book = dataJson;
							dataJson = new Array();
							dataJson.push(book);
						}
							
						
						var stringValue = "<tr>";
						$.each(dataJson,function() {
							  stringValue = stringValue + "<td width='20%' align='center'>";
							  stringValue = stringValue + "<table>";
							  stringValue = stringValue + "<tr>";
							  stringValue = stringValue + "<td class='bookData'>";
							  stringValue = stringValue + "<a href='book.htm?isbn=" + this.isbn + "'>";
							  stringValue = stringValue + "<img style='max-width:120px;max-height:144px;' alt='" + this.title + "' src='" + this.imageUrl + "' border='0'/>";
							  stringValue = stringValue + "</a>";
							  stringValue = stringValue + "</td>";
							  stringValue = stringValue + "</tr>";
							  stringValue = stringValue + "<tr>";
							  stringValue = stringValue + "<td class='bookData'>";
							  stringValue = stringValue + this.title;
							  stringValue = stringValue + "</td>";
							  stringValue = stringValue + "</tr>";
							  stringValue = stringValue + "<tr>";
							  stringValue = stringValue + "<td class='bookData'>";
							  stringValue = stringValue + "by " + this.author;
							  stringValue = stringValue + "</td>";
							  stringValue = stringValue + "</tr>";
							  stringValue = stringValue + "</table>";
							  stringValue = stringValue + "</td>";
							});
						stringValue = stringValue + "</tr>";
						$(tableId).html(stringValue);
					}
				});	
					
		});
			
	});
</script>

<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<link rel="stylesheet" href="css/general.css" type="text/css">
<title>Digital Books</title>

<script type="text/javascript" src="js/tabber.js"></script>
<link rel="stylesheet" href="css/example.css" TYPE="text/css"
	MEDIA="screen">
</head>


<body>
<input id="hdnTabSelected" value="Hot" type="hidden">

	<div class="div_header">
		<br> <br> <label style="padding-left: 15px;">Digital
			Books</label> <br> <br>
	</div>
	<div class="div_line"></div>
	<div class="div_login">
		<a href="login.htm"><img alt="" src="img/login.png" width="50" height="50"></a>
	</div>
	<div class="tabber">

		<div class="tabbertab">
			<h2>Hot</h2>
			<table width="100%" id="hotTable" class="table_design">				
			</table>
			<br>
		</div>
		
		<div class="tabbertab">
			<h2>By ISBN</h2>
			<table width="100%" id="isbnTable" class="table_design">
			</table>
			<br>
		</div>

		<div class="tabbertab">
			<h2>By Author</h2>
			<table id="authorTable" width="100%" class="table_design">				
			</table>
		</div>
		
		<div class="tabbertab">
			<h2>By Title</h2>
			<table id="titleTable" width="100%" class="table_design">				
			</table>
		</div>
		
		<div class="tabbertab">
			<h2>By Category</h2>
			<table id="categoryTable" width="100%" class="table_design">				
			</table>
		</div>

			<div class="tabbertab">
				<h2>Register a book</h2>
				<p>
					<a href="registrar.htm">Register a book</a>
				</p>
			</div>
		<br> <br>
		<div>
			<table align="center">
				<tr>
					<td><label class="lblSearch"> Search: </label>
					<input id=txtSearch type="text" value="" style="width: 320pt;"/> &nbsp;
					<a id="btnSearch" href="#" ><img alt="" src="img/search.png" border="0" width="22" height="22"/></a>
					</td>
				</tr>

			</table>

		</div>
	</div>
</body>
</html>